<!DOCTYPE html>
<html data-ng-app=" ">
<head>
	<meta charset="UTF-8">
	<title>DGWeb</title>
	<link rel="stylesheet" href="css/bootstrap.css" />
	<link rel="stylesheet" href="css/MainStyle.css" />
	<link rel="stylesheet" href="css/TopicStyle.css" />
	<script src="js/angular.min.js"></script>
	<script src="js/mainWindow.js"></script>
	<script src="js/bootstrap.min.js"></script> <!-- For Dropdown button -->
</head>
<body>
	<div class="container-fluid" data-ng-controller="MainWindow" data-ng-init="checkSession('TopicWindow')">
		<div class="jumbotron"><h1><br></h1></div>
		<div class="panel panel-default panel-half-transparent"> <!-- Panel User profile and logout -->
		  <div class="panel-body">
		  	<ul class="nav nav-pills">
		  		<li id="WelcomeLabel" data-ng-show="ShowUpdatesButtonFlag" >
		  			<button type="submit" class="btn btn-default css_btn_class" data-ng-click="UpdateTopicsMessages()">See new updates</button>
		  		</li>
		  		<li id="LogoutButton">
		  	 		<form method="post" action = "logout">
		  	 			<button type="submit" class="btn btn-default css_btn_class" >Logout</button>
		  	 		</form>
		  	 	</li>
		  	 	<li id="MainButton">
		  	 			<button type="submit" class="btn btn-default css_btn_class" onclick="location.href = 'main.html'">Main Window</button>
		  	 	</li>
		  	 	<li id="UserProfileButton">
		  	 		<button class="btn btn-default css_btn_class" data-ng-click="btnShowMemberProfile(Nick)" >User Profile</button>
		  	 	</li>

		  	 </ul>
		  </div>
		</div>  <!-- End Panel User profile and logout -->
		<div data-ng-init="GetTopicMessages()" > <!--Main Window -->
			<div> <!-- Topic Word -->
				<h1  style=" text-align: center; font-size:60px; text-shadow: 2px 2px 5px #FFFFFF; text-decoration: underline;"><b>{{Topic}}</b></h1>
			</div>
			<br>
			<div >
				<div  data-ng-init="btnDiscover(5)"><!-- ShowMessages -->
				 <div data-ng-repeat="x in result" > 
			   		<div class="panel panel-default panel-q-transparent" id="ShowMessageDiv">
		  				<!-- Who wrote and when -->
		  				<small id="ShowWhoWroteAndWhenSmallLebal"> Posted By: <a data-ng-click="btnShowMemberProfile(x.Nickname)" id="red_user"><span data-ng-bind="x.Nickname"></span></a> ( <span data-ng-bind="x.Time"></span> )</small> 
		  				<br>
				  		<!-- The message -->	
					   	<div class="panel-body">
							<label data-ng-model="theMessage" id="ShowMessageTextLaebl"><span data-ng-bind-html="TurnToHtml(x.Text)" data-compile-template></span></label>
					  		
					  	</div>
						<div  id="ShowReplyDiv"> <!--reply field for every message-->
						   	<form name="replyForm" data-ng-submit="btnReply(x,5)" >
						   	<small>Reply:</small><br>
							   	<textarea name="message_text" id="SendReplyText" rows="2" data-ng-model="x.message_text_reply" required data-ng-maxlength="140"></textarea>
							   	<button type="submit" class="btn btn-default btn-sm" id="SendReplyButton">Reply </button>
						   		<div class="error" data-ng-show="replyForm.message_text.$invalid">
		    						<small class="error" data-ng-show="replyForm.message_text.$error.maxlength"><font color="red"> Reply cannot be longer than 140 characters.</font></small>
						  		</div>
						   </form>
					   	</div>
					   	<br>
				   </div><!-- End show Message -->
				    <!--  Show Comments -->
				    <div data-ng-show="true">
					   <div data-ng-repeat="t in x.theComments" >
							<div id="ShowComments" class="panel panel-default panel-q-transparent" >
								<small id="ShowWhoWroteAndWhenSmallLebal"> Posted By: <a data-ng-click="btnShowMemberProfile(t.Nickname)" id="red_user"><span data-ng-bind="t.Nickname"></span> </a>( <span data-ng-bind="t.Time"></span>  )</small> 
								<br>
								<label data-ng-model="theComment" id="ShowCommentTextLaebl"><span data-ng-bind-html="TurnToHtml(t.Text)" data-compile-template></span></label>
				  		  	</div>
			  		  	</div> <!-- End Show Comments -->
		  		  	</div>
				   <br>
			  </div>  <!-- end of div ng-repeat -->
			   
			</div> <!--  end of div show Messages -->
			</div>
		</div><!-- end Man window -->
	</div> <!-- End Main Div -->


<br>
<br>
<br>
</body>
</html>